<template>
	<view class="commission-page">

		<!-- 统计卡片 -->
		<view class="stats-card">
			<view class="stats-item">
				<view class="stats-value">{{ totalAmount }}</view>
				<view class="stats-label">总佣金</view>
			</view>
			<view class="stats-item">
				<view class="stats-value">{{ settledAmount }}</view>
				<view class="stats-label">已结算</view>
			</view>
			<view class="stats-item">
				<view class="stats-value">{{ pendingAmount }}</view>
				<view class="stats-label">待结算</view>
			</view>
		</view>


		<!-- 佣金列表 -->
		<view class="commission-list">
			<view class="list-item" v-for="item in commissionList" :key="item.id" @click="goToDetail(item)">
				<view class="item-header">
					<view class="order-info">
						<text class="order-no">订单号：{{ item.order_no }}</text>
						<text class="order-time">{{ item.create_time_text }}</text>
					</view>
					<view class="status-badge" :class="getStatusClass(item.commission_status)">
						{{ getStatusText(item.commission_status) }}
					</view>
				</view>
				<view class="item-content">
					<view class="commission-info">
						<view class="commission-row">
							<text class="label">代理类型：</text>
							<text class="value">{{ item.agent_type_text }}</text>
						</view>
						<view class="commission-row">
							<text class="label">订单金额：</text>
							<text class="value">¥{{ item.order_money }}</text>
						</view>
						<view class="commission-row">
							<text class="label">佣金比例：</text>
							<text class="value">{{ item.commission_rate }}%</text>
						</view>
					</view>
					<view class="commission-amount">
						<text class="amount-label">佣金金额</text>
						<text class="amount-value">¥{{ item.commission_amount }}</text>
					</view>
				</view>
				<view class="item-footer" v-if="item.commission_status === 1">
					<text class="settle-time">结算时间：{{ item.settle_time_text }}</text>
				</view>
			</view>
		</view>

		<!-- 空状态 -->
		<view class="empty-state" v-if="commissionList.length === 0 && !loading">
			<image src="/static/img/icon_wodedingdan.png" class="empty-icon"></image>
			<text class="empty-text">暂无佣金记录</text>
		</view>

		<!-- 加载状态 -->
		<view class="loading-state" v-if="loading">
			<text class="loading-text">加载中...</text>
		</view>

		<!-- 加载更多 -->
		<view class="load-more" v-if="hasMore && !loading">
			<text class="load-more-text" @click="loadMore">加载更多</text>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import { getRegionCommissionList, getRegionCommissionStats } from '@/utils/api'

// 定义类型接口
interface CommissionItem {
	id: number
	order_no: string
	agent_type: string
	agent_type_text: string
	order_money: string
	commission_rate: string
	commission_amount: string
	commission_status: number
	create_time: number
	create_time_text: string
	settle_time?: number
	settle_time_text: string
}

interface ApiResponse {
	code: number
	msg: string
	data: any
}

// 响应式数据
const commissionList = ref<CommissionItem[]>([])
const loading = ref(false)
const hasMore = ref(true)
const currentPage = ref(1)

// 统计数据
const totalAmount = ref('0.00')
const settledAmount = ref('0.00')
const pendingAmount = ref('0.00')


// 生命周期
onLoad(() => {
	loadCommissionList()
	loadStats()
})

onReachBottom(() => {
	if (hasMore.value && !loading.value) {
		loadMore()
	}
})

// 方法
const loadCommissionList = async (page = 1) => {
	if (loading.value) return
	
	loading.value = true
	try {
		// 调用API获取佣金列表
		const res = await getRegionCommissionList({
			page,
			limit: 10
		}) as ApiResponse
		
		if (res.code === 1) {
			const data: CommissionItem[] = res.data.list || []
			
			if (page === 1) {
				commissionList.value = data
			} else {
				commissionList.value.push(...data)
			}
			
			hasMore.value = data.length >= 10
			currentPage.value = page
		} else {
			throw new Error(res.msg || '加载失败')
		}
	} catch (error) {
		console.error('加载佣金列表失败:', error)
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

const loadStats = async () => {
	try {
		// 调用API获取统计数据
		const res = await getRegionCommissionStats() as ApiResponse
		
		if (res.code === 1) {
			totalAmount.value = res.data.total_amount
			settledAmount.value = res.data.settled_amount
			pendingAmount.value = res.data.pending_amount
		} else {
			throw new Error(res.msg || '加载统计数据失败')
		}
	} catch (error) {
		console.error('加载统计数据失败:', error)
		uni.showToast({
			title: '加载统计数据失败',
			icon: 'none'
		})
	}
}


const loadMore = () => {
	loadCommissionList(currentPage.value + 1)
}

const goToDetail = (item: CommissionItem) => {
	uni.navigateTo({
		url: `/mypages/region/commission/detail?id=${item.id}`
	})
}

const getStatusClass = (status: number) => {
	switch (status) {
		case 0:
			return 'status-pending'
		case 1:
			return 'status-settled'
		default:
			return 'status-pending'
	}
}

const getStatusText = (status: number) => {
	switch (status) {
		case 0:
			return '待结算'
		case 1:
			return '已结算'
		default:
			return '未知'
	}
}

</script>

<style lang="scss" scoped>
@import './commission.scss';
</style>
